<template>
    <view :style="{ '--color': color }">
        <status-bar title="添加银行卡"></status-bar>
        <view class="viewbox auto">
            <picker mode="selector" :range="bank" @change="bankSelect">
                <view class="list bot">
                    <text class="title">选择银行</text>
                    <view class="flex-1 height d-flex j-sb a-center">
                        <text class="size26" :class="bankName ? 'color_33' : 'color_99'">{{ bankName ? bankName : '请选择银行' }}</text>
                        <view class="iconfont icon-a-zujian32 color_cc h6"></view>
                    </view>
                </view>
            </picker>
            <view class="list bot">
                <text class="title">开户支行</text>
                <input type="text" class="flex-1 height color_33 size26" v-model="branchBank" placeholder="输入开户支行" placeholder-class="play" />
            </view>
            <view class="list bot">
                <text class="title">银行卡号</text>
                <input type="number" v-model="bankCard" class="flex-1 height color_33 size26" placeholder="输入完整的银行卡号" placeholder-class="play" />
            </view>
            <view class="list bot">
                <text class="title">持卡人姓名</text>
                <input type="text" v-model="userName" class="flex-1 height color_33 size26" placeholder="点击输入持卡人姓名" placeholder-class="play" />
            </view>
            <view class="list bot">
                <text class="title">身份证号码</text>
                <input type="text" v-model="idNo" class="flex-1 height color_33 size26" placeholder="点击输入身份证号码" placeholder-class="play" />
            </view>
            <view class="list bot">
                <text class="title">联系电话</text>
                <input type="number" v-model="phone" class="flex-1 height color_33 size26" placeholder="点击输入联系电话" placeholder-class="play" />
            </view>
        </view>

        <view class="viewbox auto">
            <view class="row a-center m-top50 line40" :class="{ shake: shake }" v-if="agreementList.length">
                <view class="agress flexac m-right20" :class="{ okAgress: agree }" @click.stop="agree = !agree">
                    <view class="iconfont icon-xuanzhong white h7 m-top6"></view>
                </view>
                <text class="color_33 size24" @click.stop="agree = !agree">我已阅读并同意</text>
                <text class="color size24" v-for="item in agreementList" :key="item.id" @click.stop="toDetails(item.id)">{{ item.title }}</text>
            </view>
        </view>

        <view class="viewboxs auto d-flex j-sa a-center m-top50">
            <view class="btns flexac bgf4 size26 color_38" @click="$back()">考虑一下</view>
            <view class="btns flexac config size26 white" @click="addBack">添加</view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                bank: [
                    '中国工商银行',
                    '中国建设银行',
                    '中国银行',
                    '交通银行',
                    '中国农业银行',
                    '招商银行',
                    '邮政储蓄银行',
                    '光大银行',
                    '民生银行',
                    '平安银行',
                    '浦发银行',
                    '中信银行',
                    '兴业银行',
                    '华夏银行',
                    '广发银行',
                    '重庆银行',
                    '重庆农村商业银行',
                    '北京银行',
                    '徽商银行',
                    '天津银行',
                    '深圳农村商业银行',
                    '上海银行',
                    '汉口银行',
                    '南京银行',
                    '宁波银行',
                    '龙江银行',
                    '北京农商银行',
                    '江苏银行',
                    '广州银行',
                    '浙商银行',
                    '杭州银行',
                    '上海农商银行',
                    '渤海银行',
                    '广州农村商业银行',
                    '青岛银行',
                    '成都银行',
                    '哈尔滨银行',
                    '吉林银行',
                    '大连银行',
                    '齐鲁银行',
                    '东莞银行',
                    '长沙银行',
                    '河北银行',
                    '东莞农村商业银行',
                    '郑州银行',
                    '包商银行'
                ],
                bankName: '',
                branchBank: '',
                bankCard: '',
                userName: '',
                idNo: '',
                phone: '',
                agreementList: [],
                shake: false,
                agree: false
            };
        },
        onShow() {
            this.agreements();
        },
        methods: {
            addBack() {
                if (!this.bankName) return this.$Toast('请选择银行');
                if (!this.branchBank) return this.$Toast('请输入开户支行');
                if (!this.bankCard) return this.$Toast('请输入银行卡号');
                if (!this.userName) return this.$Toast('请输入持卡人姓名');
                if (!this.agree) return this.$Toast('未同意协议');
                // if(!this.idNo) return this.$Toast('请输入身份证号码');
                this.$http
                    .post({
                        url: '/singleSaleApi/addBankcard',
                        data: {
                            cash_method: 1,
                            userName: this.userName,
                            bankName: this.bankName,
                            bankCard: this.bankCard,
                            branchBank: this.branchBank,
                            idNo: this.idNo,
                            phone: this.phone
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.$Toast(res.msg, 2);
                    });
            },
            bankSelect(e) {
                this.bankName = this.bank[e.detail.value];
            },
            agreements() {
                let agreeList = JSON.parse(JSON.stringify(this.regInfo.agreement));
                if (!agreeList.length) return;
                agreeList.forEach((item, index) => {
                    if (index != agreeList.length - 1) {
                        item.title = `《${item.title}》、`;
                    } else {
                        item.title = `《${item.title}》`;
                    }
                });
                this.agreementList = agreeList;
            },
            toDetails(id) {
                this.toUrl(`/otherPage/article/artDetail?artId=${id}`);
            }
        },
        computed: {
            ...mapState(['color', 'regInfo'])
        },
        watch: {
            agreementList: {
                deep: true,
                immediate: true,
                handler(newVal, oldVal) {
                    newVal.length ? (this.agree = false) : (this.agree = true);
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .list {
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .title {
        width: 180rpx;
        color: #333;
        font-size: 26rpx;
    }
    ::v-deep.play {
        color: #999;
    }
    .btns {
        width: 258rpx;
        height: 76rpx;
        border-radius: 38rpx;
    }
    .config {
        background-color: var(--color);
    }
    .agress {
        width: 32rpx;
        height: 32rpx;
        border: 1px solid #dedede;
        border-radius: 50%;
    }
    .okAgress {
        border: 1px solid var(--color);
        background-color: var(--color);
    }
    // .icon-xuanzhong {
    //     zoom: 0.8;
    // }
    .shake {
        animation: shake 0.3s;
    }
    @keyframes shake {
        0% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(-10rpx);
        }
        50% {
            transform: translateX(10rpx);
        }
        75% {
            transform: translateX(-10rpx);
        }
        100% {
            transform: translateX(0);
        }
    }
</style>
